<template>
	<view>
		<u-navbar placeholder :autoBack="true" title="查询订单"></u-navbar>
		<scroll-view :scroll-y="true" :style="{height: scrollViewHeight, backgroundColor: '#f5f5f5'}">
			<view :style="{backgroundColor: appColor}" class="parking-top">
				<text style="color: #fff;font-size: 36rpx;letter-spacing: 2rpx;">渝A38R8N</text>
				<view style="height: 16rpx;"></view>
				<text style="color: #fff;" v-if="time>0">请在 <text style="font-size: 42rpx;padding: 0 16rpx;">{{time}}</text> 秒内完成支付</text>
				<text style="color: #fff;" v-else>缴费已超时, 请返回重新缴费</text>
			</view>
			<view style="padding: 32rpx;">
				<u-row gutter="8">
					<u-col span="6">
						<view class="col-item">
							<text style="font-size: 28rpx;color: #333;font-weight: bold;">需支付</text>
							<view style="height: 8rpx;"></view>
							<view>
								<text :style="{color: appColor, fontSize: '36rpx'}">10.00</text>
								<text style="font-size: 24rpx;">元</text>
							</view>
						</view>
					</u-col>
					<u-col span="6">
						<view class="col-item">
							<text style="font-size: 28rpx;color: #333;font-weight: bold;">停车时长</text>
							<view style="height: 8rpx;"></view>
							<view>
								<text :style="{color: appColor, fontSize: '36rpx'}">10时10分26秒</text>
							</view>
						</view>
					</u-col>
				</u-row>
				<view style="height: 16rpx;"></view>
				<view style="padding: 32rpx;background-color: #fff;border-radius: 8rpx;">
					<view style="font-size: 32rpx;color: #333;font-weight: bold;margin-bottom: 32rpx;">
						<text>停车详情</text>
					</view>
					<view style="font: size 28rpx; color: #333;margin-bottom: 32rpx;">
						<text style="padding-right: 32rpx;">车场名称: </text>
						<text>绿地 </text>
					</view>
					<view style="font: size 28rpx; color: #333;margin-bottom: 32rpx;">
						<text style="padding-right: 32rpx;">入场时间: </text>
						<text>2022-12-12 12:08:09 </text>
					</view>
					<view style="font: size 28rpx; color: #333;margin-bottom: 32rpx;">
						<text style="padding-right: 32rpx;">入场图片: </text>
						<text :style="{color: appColor}">查看图片 </text>
					</view>
					<view style="font: size 28rpx; color: #333;margin-bottom: 32rpx;">
						<text style="padding-right: 32rpx;">应付金额: </text>
						<text>10.00元 </text>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="good-detail-bootom">
			<view style="margin: 0 16rpx;height: 100%;width: calc(100vw - 32rpx);display: flex;align-items: center;">
				<view class="good-detail-bootom-r">
					<u-button :disabled="time <= 0" :throttleTime="300" @click="save" :color="appColor" text="立即支付" shape="circle"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapActions} from 'vuex';
	import {notice} from '@/api/home.js';
	export default {
		data() {
			return {
				time: 180,
				timer: null
			}
		},
		computed: {
			appColor() {
				return this.appPrimaryColor || '#f40215'
			},
			scrollViewHeight() {
				return this.scrollHeight - 44 + 'px';
			}
		},
		onLoad() {
			this.timer = setInterval(() => {
				this.time--
			}, 1000)
		},
		methods: {
		},
		onUnload() {
			clearInterval(this.timer);
		}
	}
</script>


<style lang="scss" scoped>
	.parking-top {
		height: 380rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	
	.col-item {
		height: 160rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 8rpx;
		padding: 32rpx;
	}
	
	.good-detail-bootom {
		background-color: #ffffff;
		position: fixed;
		height: 50px;
		width: 100vw;
		bottom: 0;
		left: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 iOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		/*兼容 iOS>11.2*/
		box-sizing: content-box;
	
		.good-detail-bootom-r {
			flex: 1;
			text-align: right
		}
	}
</style>
